<style lang='less'>
    .edit-remark-drawer {
        .input__textarea {
        }
    }
</style>

<template>
<a-drawer
    class="edit-remark-drawer"
    :width="480"
    :visible="visible"
    @cancel="handleCancel"
    @ok="updateRemark"
    @close="handleClose"
    ok-text="保存"
    unmountOnClose
  >
    <template #title>编辑备注</template>
    <a-textarea
          class="input__textarea"
          placeholder="请输入"
          v-model="remark"
          allow-clear
          :auto-size="{
            minRows: 4
          }"
        />
</a-drawer>
</template>

<script setup lang='ts'>
import { ref, watchEffect, defineProps, withDefaults, defineEmits } from "vue";
import { Message } from '@arco-design/web-vue';
import { order } from '@/api'

interface PropsType {
    visible: boolean
    id: number
    remarkContent: string
}
interface EmitType {
    (e: 'changeEditRemarkDrawerVisible', v: boolean): void
    (e: 'updateList'): void
}

const props = withDefaults(defineProps<PropsType>(), {
    visible: false,
    remarkContent: '',
});
watchEffect(() => {
    if(props.remarkContent) {
        remark.value = props.remarkContent;
    }
})
const emit = defineEmits<EmitType>();

const handleCancel = () => {
    emit('changeEditRemarkDrawerVisible', false);
}
const handleClose = () => {
    remark.value = '';
}
const remark: any = ref('');

const updateRemark = async () => {
    const body = {
        remark: remark.value,
    }
    const { ok, data } = await order.updateRemark(props.id, body);
    if(!ok) return;
    Message.success('修改成功');
    emit('changeEditRemarkDrawerVisible', false);
    emit('updateList');
}
</script>